<template>
	<view class="container">
		<view>
			<div class="name" style="margin-left: 22rpx; margin-top: 22rpx; font-size: 15px;font-family: Segoe UI-Regular;">
				<span style="font-size: 18px;font-weight: bold;">设备名称:</span>{{ data.deviceName  || '暂无数据' }} -{{ data.deviceId}}

			</div>
			<div class="allitem">
				<div class="item">
					
					<div>
						<image src="../../../static/icon-font/daqiya.png" alt="">
						<p style="font-size: 14px;  font-weight: bold">大气压</p>
						<p style="font-size: 12px;">{{data.daqiya  || '暂无数据'}}</p>
					</div>
				</div>
				<div class="item">
					<div>
						<image src="../../../static/icon-font/fengli.png" alt="">
						<p style="font-size: 14px;  font-weight: bold">风力</p>
						<p style="font-size: 12px;">{{data.fengli  || '暂无数据'}}</p>
					</div>
				</div>
				<div class="item">
			
					<div>
						<image src="../../../static/icon-font/fengsu.png" alt="">
						<p style="font-size: 14px;  font-weight: bold">风速</p>
						<p style="font-size: 12px;">{{data.fengsu  || '暂无数据'}}</p>
					</div>
				</div>
				<div class="item">
				
					<div>
						<image src="../../../static/icon-font/kongqishidu.png" alt="">
						<p style="font-size: 14px;  font-weight: bold">湿度</p>
						<p style="font-size: 12px;">{{data.shiwu  || '暂无数据'}}</p>
					</div>
				</div>
				<div class="item">
				
					<div>
						<image src="../../../static/icon-font/fengxiangbiao.png" alt="">

						<p style="font-size: 14px;  font-weight: bold">风标</p>
						<p style="font-size: 12px;">{{data.fengxiangdanwei  || '暂无数据'}}</p>
					</div>
				</div>
				<div class="item">
				
					<div>
						<image src="../../../static/icon-font/PM2.5.png" alt="">

						<p style="font-size: 14px;  font-weight: bold">PM2.5</p>
						<p style="font-size: 12px;">{{data.pmTwoFive  || '暂无数据'}}</p>
					</div>
				</div>
				<div class="item">
					
					<div>
						<image src="../../../static/icon-font/PM10.png" alt="">

						<p style="font-size: 14px;  font-weight: bold">PM10</p>
						<p style="font-size: 12px;">{{data.pmTen  || '暂无数据'}}</p>
					</div>
				</div>
		

	
				<div class="item">
					
					<div>
						<image src="../../../static/icon-font/temperature.png" alt="">

						<p style="font-size: 14px;  font-weight: bold">温度</p>
						<p style="font-size: 12px;">{{data.wendu  || '暂无数据'}}</p>
					</div>
				</div>
				
				<div class="item">
					
					<div>
						<image src="../../../static/icon-font/noice.png" alt="">

						<p style="font-size: 14px;  font-weight: bold">噪声</p>
						<p style="font-size: 12px;">{{data.zaosheng  || '暂无数据'}}</p>
					</div>
				</div>
		
				<div class="item">
					
					<div>
						<image src="../../../static/icon-font/baojing.png" alt="">

						<p style="font-size: 14px;  font-weight: bold">报警</p>
						<p style="font-size: 12px;"
						:style="{color: data.flag == 0 ? 'green' : 'red'}"
						>{{data.flag == 1 ? '报警' : (data.flag == 0 ? '正常' : '暂无数据')}}</p>
					</div>
				</div>
			</div>
		</view>

	</view>
</template>

<script>
export default {
	props: ['data'],
	mounted() {

	},
	watch:{
	},
	onLoad() {
	},
	data() {
		return {
			
		}
	},
	methods: {
		
	}
}
</script>

<style scoped>
.container {
	width: 100%;
	height: 40vh;
}

.didi {
	width: 90%;
	height: 100vh;
	background-color: white;
	margin-left: 5%;
	border-radius: 20rpx;
}
.allitem{
	display: flex;
	flex-wrap: wrap;
	margin-left: 22rpx;
}
.item{
	width: 15%;
	margin-left: 60rpx;
	
	margin-top: 30rpx;
}
image{
	width: 20px;
	height: 20px;
}
</style>